// 导入 Vue 和 Vuex
import vue from 'vue';
import Vuex from 'vuex';
import router, { resetRouter } from '../router'; // 导入 router 和 resetRouter 方法
import createPersistedState from 'vuex-persistedstate'; // 导入持久化状态插件

vue.use(Vuex); // 注册 Vuex 插件

// 用于添加新路由的函数
function addNewRoute(menuList) {
    console.log("menuList=========" + menuList);
    console.log(menuList); // 打印传入的菜单列表
    let routes = router.options.routes; // 获取当前路由的配置

    // 循环路由
    routes.forEach(routeItem => {
        if (routeItem.path == "/index") { // 检查是否是目标路由
            // 循环菜单数据
            menuList.forEach(menu => {
                // 定义子路由
                let childRoute = {
                    path: '/' + menu.menuClick,
                    name: menu.menuName,
                    meta: {
                        title: menu.menuName, // 路由的标题
                    },
                    component: () => import('../components/' + menu.menuComponent), // 懒加载组件
                };
                // 添加子路由到目标路由的 children 数组
                routeItem.children.push(childRoute);
            });
        }
    });

    // 调用路由清空方法以避免重复
    resetRouter();
    router.addRoutes(routes); // 添加新的路由
}

// 创建一个新的 Vuex Store 实例
export default new Vuex.Store({
    // 数据状态管理，相当于 Vue 组件的 data
    state: {
        menu: [] // 初始化菜单状态为空数组
    },
    // 计算属性，用于获取状态
    getters: {
        getMenu(state) {
            return state.menu; // 返回菜单状态
        }
    },
    // 定义方法来修改 state
    mutations: {
        setMenu(state, menuList) {
            state.menu = menuList; // 设置新的菜单状态
            addNewRoute(menuList); // 调用 addNewRoute 函数添加新路由
        }
    },
    // 定义异步操作
    actions: {
        // 您可以定义这里的异步操作
    },
    // 模块管理
    modules: {
        // 可以定义其他子模块
    },
    // 使用持久化插件实现刷新后状态的保留
    plugins: [createPersistedState()]
});